<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

@if (!isLoading) {
  <div class="card mb-3">
    <h4 class="card-header">Current cats ({{cats.length}})</h4>
    <div class="card-body">
      <table class="table table-bordered">
        <thead class="table-secondary">
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Weight</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        @if (cats.length === 0) {
          <tbody>
            <tr>
              <td colspan="4">There are no cats in the DB. Add a new cat below.</td>
            </tr>
          </tbody>
        }
        @if (!isEditing) {
          <tbody>
            @for (cat of cats; track cat) {
              <tr>
                <td>{{cat.name}}</td>
                <td>{{cat.age}}</td>
                <td>{{cat.weight}}</td>
                <td>
                  <button class="btn btn-sm btn-primary" (click)="enableEditing(cat)">
                    <i class="fa fa-pencil"></i> Edit
                  </button>
                  <button class="btn btn-sm btn-danger ms-1" (click)="deleteCat(cat)">
                    <i class="fa fa-trash"></i> Delete
                  </button>
                </td>
              </tr>
            }
          </tbody>
        }
        @if (isEditing) {
          <tbody>
            <tr>
              <td colspan="4">
                <form #form="ngForm" (ngSubmit)="editCat(cat)">
                  <div class="row row-cols-1 row-cols-sm-auto g-2">
                    <div class="col">
                      <input class="form-control" type="text" name="name" [(ngModel)]="cat.name" placeholder="Name"
                        required>
                    </div>
                    <div class="col">
                      <input class="form-control" type="number" name="age" [(ngModel)]="cat.age" placeholder="Age" min="0"
                        required>
                    </div>
                    <div class="col">
                      <input class="form-control" type="number" name="weight" [(ngModel)]="cat.weight" placeholder="Weight"
                        step="any" min="0" required>
                    </div>
                    <div class="col d-flex align-items-center">
                      <button class="btn btn-sm btn-primary me-2" type="submit" [disabled]="!form.form.valid">
                        <i class="fa fa-floppy-o"></i> Save
                      </button>
                      <button class="btn btn-sm btn-warning" (click)="cancelEditing()">
                        <i class="fa fa-times"></i> Cancel
                      </button>
                    </div>
                  </div>
                </form>
              </td>
            </tr>
          </tbody>
        }
      </table>
    </div>
  </div>
}

@if (!isEditing) {
  <app-add-cat-form [cats]="cats"></app-add-cat-form>
}